<template>
	<view class="content">
		<IndexHead :config="navConfig" />
		<!-- 选项卡头部 -->
		<view class="glmoreTabBox">
			<view class="glmoreTab">
				<view v-for="(tab,index) in tabBars" :key="tab.id" :class="tabIndex==index ? 'active' : ''" @click="tapTab(index)">
					{{tab.name}}
				</view>
			</view>
		</view>

		<view class="list-area">
			<uni-swipe-action 
			v-for="(tabList,index1) in listdata" 
			:key="index1" 
			class="pic1All" 
			:options="options2">
					<view class="single" @tap="goOrderDetails(index1)">
						<view class="pic1">
							<image :src="tabList.img"></image>
						</view>
						<view class="pic1Text">
							<h4>{{tabList.name}}</h4>
							<h5>下单日期: {{tabList.time}}</h5>
							<h5 v-if="tabIndex == 3 || tabIndex == 4">使用日期: {{tabList.time2}}</h5>
							<h6>{{tabList.type}}</h6>
							<p>￥{{tabList.price}}</p>
						</view>
					</view>
			
			<view class="payStatus">
				<!-- 全部订单 -->
				<view class="btn" v-if="tabIndex == 0">
					<text class="orderTipStyle1">取消订单</text>
					<text class="payStatusStyle1" @tap="payStatusBtn(tabIndex)">立即支付</text>
				</view>
				<!-- 代付款 -->
				<view class="btn" v-if="tabIndex == 1">
					<text class="orderTipStyle1">取消订单</text>
					<text class="payStatusStyle1" @tap="payStatusBtn(tabIndex)">立即支付</text>
				</view>
				<!-- 待使用 -->
				<view class="btn" v-if="tabIndex == 2">
					<text class="orderTipStyle2"></text>
					<text class="payStatusStyle2" @tap="payStatusBtn(tabIndex)">申请退款</text>
				</view>
				<!-- 待评价 -->
				<view class="btn" v-if="tabIndex == 3">
					<text class="orderTipStyle3">评价</text>
					<text class="payStatusStyle3" @tap="payStatusBtn(tabIndex)">申请发票</text>
				</view>
				<!-- 待退款 -->
				<view class="btn" v-if="tabIndex == 4">
					<text class="orderTipStyle4"></text>
					<text class="payStatusStyle4" @tap="payStatusBtn(tabIndex)">退款已申请，等待卖家处理</text>
				</view>
			</view>
			</uni-swipe-action>
		</view>

		<!-- 选项卡内容 -->
		<!-- <swiper :current="tabIndex" duration="300" class="swiper-box swiper-no-swiping" @change="changeTab">
			<swiper-item catchtouchmove="stopTouchMove" class="tab-content" v-for="(order,index) in orderList" :key="index">
				<scroll-view scroll-y class="scrollHeight"> -->
		<!-- 空白页 -->
		<!-- <empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty> -->
		<!-- 订单列表 -->

				<!-- </scroll-view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
	import uniSwipeAction from '@/components/uni-swipe-action/uni-swipe-action'
	export default {
		components:{
			uniSwipeAction
		},
		data() {
			return {
				navConfig: {
					swiperOption: {
						// autoplay:false,
						// some swiper options/callbacks
						// 所有的参数同 swiper 官方 api 参数
						// ...
					},
					backgroundColor: 'transparent',
					color: '#fff',
					common: {
						hasSearch: false,
						hasMenu: false,
						hasTitle: true,
						headHeight:200,
						fixBg:false
					},
					left: {
						img: '',
						text: '',
					},
					mid: {
						title: '全部订单',
						hasSearchMid: false
					},
					right: {

					}
				},
				options2:[{
					text: '删除',
						style: {
							backgroundColor: '#F97474'
						}
					}
				],
				curTabIndex: 0,
				tabIndex: 0, //默认选中第一个tab
				tabBars: [{
						name: '全部订单'
					},
					{
						name: '待付款'
					},
					{
						name: '待使用'
					},
					{
						name: '待评价'
					},
					{
						name: '待退款'
					}
				],

				orderList: [{
						state: 0,
						tabLists: [{
								img: '/static/myPic/order.jpg',
								name: '冰峪度假区',
								time: '2020-08-09',
								time2: '2019-03-12',
								type: '自然风景',
								price: 168,
								// orderStatus:'查看物流',
								// payStatus:'评 价',
							},
							{
								img: '/static/glBan.png',
								name: '五岳之首-泰山风景区',
								time: '2020-08-09',
								time2: '2019-03-12',
								type: '自然风景',
								price: 168,
								// orderStatus:'查看物流',
								// payStatus:'确认收货'
							},
							{
								img: '/static/myPic/order.jpg',
								name: '越南泰国八日游',
								time2: '2019-03-12',
								time: '2019-03-12',
								type: '自然风景',
								price: 98,
								// orderStatus:'取消订单'
							},
							{
								img: '/static/glBan.png',
								name: '五岳之首-泰山风景区',
								time: '2020-08-09',
								time2: '2019-03-12',
								type: '自然风景',
								price: 168,
								// orderStatus:'查看物流',
								// payStatus:'确认收货'
							},
							{
								img: '/static/myPic/order.jpg',
								name: '越南泰国八日游',
								time2: '2019-03-12',
								time: '2019-03-12',
								type: '自然风景',
								price: 98,
								// orderStatus:'取消订单'
							}
						]
					},
					{
						state: 1,
						tabLists: [{
							img: '/static/glBan.png',
							name: '五岳之首-泰山风景区',
							time: '2020-08-09',
							time2: '2019-03-12',
							type: '自然风景',
							price: 168,
							// orderStatus:'取消订单',
							// payStatus:'立即支付'
						}]
					},
					{
						state: 2,
						tabLists: [{
							img: '/static/myPic/order.jpg',
							name: '越南泰国八日游',
							time: '2019-03-12',
							time2: '2019-03-12',
							type: '自然风景',
							price: 98,
							// orderStatus:'',
							// payStatus:'申请退款'
						}]
					},
					{
						state: 3,
						tabLists: [{
							img: '/static/myPic/order.jpg',
							name: '五岳之首',
							time: '2019-03-12',
							time2: '2019-03-12',
							type: '自然风景',
							price: 98,
							// orderStatus:'评价',
							// payStatus:'申请发票'
						}]
					},
					{
						state: 4,
						tabLists: [{
							img: '/static/myPic/order.jpg',
							name: '越南泰国八日游',
							time: '2019-03-12',
							time2: '2019-03-12',
							type: '自然风景',
							price: 9800,
							// orderStatus:'',
							// payStatus:'退款已申请，等待卖家处理'
						}]
					}
				],
				listdata: [],
			}
		},
		computed: {},

		// mounted() {
		// 	this.listdata = this.orderList[0].tabLists
		// },
		methods: {
			stopTouchMove(e) {
				return false
			},
			tapTab(index) {
				this.tabIndex = index;
				// console.log(this.tabIndex);
				this.listdata = this.orderList[index].tabLists
				
			},
			payStatusBtn(tabIndex) {
				 console.log(tabIndex);
				// 跳到申请电子发票
				if (tabIndex == 3) {
					uni.navigateTo({
						url: '/pages/my/myOrder/myNotEvaluation/invoiceDZ/dianZi'
					})
				}
			},
			// 去对应的订单详情
			goOrderDetails(index1) {
				console.log('index1:'+index1);
				console.log('tabIndex:'+this.tabIndex);
				// 全部订单测试展示用
				if(this.tabIndex == 0){
					uni.navigateTo({
						url: '/pages/my/myOrder/orderDetails?orderDetails=1'
					});
				}else{
					uni.navigateTo({
						url: '/pages/my/myOrder/orderDetails?orderDetails=' + this.tabIndex
						// url: '/pages/my/myOrder/orderDetails?orderDetails=' + index1&'orderTab=' + this.tabIndex
					});
				}
				
				
			}
		},
		onLoad(options) {
			this.tabIndex = options.state
			console.log(this.tabIndex);
			this.listdata = this.orderList[this.tabIndex].tabLists
		}
	}
</script>

<style>
	/* 订单支付状态样式 */
	.orderTipStyle1 {
		color: #666666;
		border: 1upx solid #999999;
	}

	.orderTipStyle2 {}

	.orderTipStyle3 {
		color: #666666;
		border: 1upx solid #999999
	}

	.payStatusStyle1 {
		
		color: #FE990A;
		border: 1upx solid #FF6C00;
	}

	.payStatusStyle2 {
		color: #DC3509;
		border: 1upx solid #DC3509;
	}

	.payStatusStyle3 {
		color: #666666;
		border: 1upx solid #999999;
	}

	.payStatusStyle4 {
		color: #999999;
	}

	page,
	.content {
		height: 100%;
	}

	.scrollHeight {
		height: 100%;
	}
	.list-area{
		height: calc(100% - 140px);
		overflow: scroll;
	}
	.swiper-box {
		
	}
.swipCon{
	display: flex;
	flex-direction: column;
}
	.single {
		display: flex;
		flex-direction: row;
		margin-left:20upx;
	}

	.pic1All {
		width:100%;
		border-bottom: 15upx solid #F6F6F6;
		/* display: table; */
		position: relative;
	}

	.swiper-box .pic1All:last-child {
		border-bottom: 0;
	}

	/* .pic1All>view {
		display: flex;
		flex-direction: row;
		align-items: center;
	} */

	.pic1 image {
		width: 259upx;
		height: 193upx;
		border-radius: 15upx;
		margin-top: 15upx;
	}

	.pic1Text {
		width: 60%;
		margin-left: 20upx;
		margin-top: 0.24rem;
		display: flex;
		flex-direction: column;
	}

	.pic1Text h4 {
		margin-top: 1vw;
		font-size: 28upx;
		color: #000000;
	}

	.pic1Text h5 {
		font-size: 20upx;
		color: #999999;
		font-weight: normal;
	}

	.pic1Text h5:first-of-type {
		margin-top: 28upx;
	}

	.pic1Text h6 {
		margin-top: 16upx;
		font-size: 22upx;
		color: #FEB540;
	}

	.pic1Text p {
		font-size: 30upx;
		text-align: right;
		color: #DD540A;
		margin-right: 20upx;
	}

	.payStatus {
		width: 100%;
		margin-top: 8upx;
		height: 60upx;
		background: #fff;
		line-height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		margin-bottom: 30upx;
		
	}

	.payStatus .btn {
		display: flex;
		flex-direction: row;
		margin-right: 40upx;
	}

	.payStatus .btn text {
		padding: 0 30upx;
		display: block;
		height: 60upx;
		text-align: center;
		border-radius: 30upx;
		font-size: 26upx;
	}

	.payStatus .btn text:last-child {
		margin-left: 35upx;
	}

	/* 头部选项卡 */
	.glmoreTabBox {
		/* margin-top: 50upx; */
		position: relative;
	}

	.glmoreTab {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-top: -82upx;
		margin-bottom: 40upx;
	}

	.glmoreTab>view {
		flex: 1;
		text-align: center;
		font-size: 24upx;
		color: #0075EE;
		line-height: 54upx;
		position: relative;
	}

	.glmoreTab .active {
		font-weight: bold;
	}

	.glmoreTab .active:before {
		content: "";
		width: 102upx;
		height: 3upx;
		background: linear-gradient(left, #8EC6FF, #6592F7);
		display: block;
		margin: auto;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -51upx;
	}
</style>
